<!--
1、内联按钮使用方法：
<line-button ref="lineButton" :data="data"></line-button>
2、主页导入注册组件
import lineButton from '@/components/bot/inline_button.vue'
export default {
  components: { lineButton },
  data() {
    return {
    };
  },
  methods: {
  }
};
3、父页面调用子组件方法
//获取数据
this.$refs.lineButton.getData()
//校验是否完整
this.$refs.lineButton.validateEmpty()
-->
<template>
    <el-container>
      <el-main>
        <el-row>
          <el-form :model="data" :rules="rules"  size="mini">
            <el-form-item :label="label" prop="content">
              <el-input type="textarea" v-model="data.content" :placeholder="placeholder"></el-input>
            </el-form-item>
          </el-form>
        </el-row>

        <el-row :gutter="3" v-for="(row, rowIndex) in data.buttonRows" :key="rowIndex">
          <el-col
            v-for="(button, buttonIndex) in row"
            :key="button.id"
            :span="6"
            class="button-col"
          >
            <div class="button-wrapper">
              <el-button class="button-wrapper-cel" type="primary" @click="showDialog(rowIndex, buttonIndex, button)">
                {{ button.text }}
              </el-button>
              <i class="el-icon-close delete-button" @click="deleteButton(rowIndex, buttonIndex)"></i>
            </div>
          </el-col>
          <el-col v-if="row.length < 4" :span="6" class="add-button-col">
            <el-button type="primary" plain icon="el-icon-plus"  @click="addButton(rowIndex)"></el-button>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="16" class="add-row-col">
            <el-button type="primary" plain @click="addRow">添加一行</el-button>
          </el-col>
          <el-col :span="8" class="add-row-col">
            <el-button type="info" plain @click="sendMessageTest()">发送测试</el-button>
          </el-col>
        </el-row>
      </el-main>

      <!-- Dialog -->
      <el-dialog
        title="编辑按钮"
        :visible.sync="dialogVisible"
        width="95%"
        :close-on-click-modal="false"
        @close="handleDialogClose"
      >
        <el-form ref="dialogForm" :model="dialogForm" :rules="rules">
          <el-form-item label="标题" prop="title">
            <el-input v-model="dialogForm.title" placeholder="请输入按钮标题"></el-input>
          </el-form-item>
          <el-form-item label="网址" prop="url">
            <el-input v-model="dialogForm.url" placeholder="请输入跳转网址"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveDialogData">确定</el-button>
        </span>
      </el-dialog>
    </el-container>
</template>

<script>
import {sendMessageTest} from "@/api/bot/botinfo";

export default {
  name: 'inline-button',
  props: {
    data:{
      type:Object,
      default:function() {
        return {
          chatId:null,
          content:null,
          buttonRows: [
            []
          ],
        }
      }
    },
    label:{
      type:String,
      default:function () {
        return "内容"
      }
    },
    placeholder:{
      type:String,
      default:function () {
        return "请输入内容"
      }
    }
  },
  data() {
    return {
      currentIndex:{},
      dialogVisible: false,
      dialogForm: {
        title: '',
        url: ''
      },
      // 表单校验
      rules: {
        content:[
          { required: true, message: this.label+"不能为空", trigger: "blur" }
        ],
        title: [
          { required: true, message: "按钮标题不能为空", trigger: "blur" }
        ],
        url: [
          { required: true, message: "网址不能为空", trigger: "blur" }
        ],
      }
    };
  },
  methods: {
    showDialog(rowIndex, colIndex, button) {
      this.dialogForm.title = button.text; // 初始化标题为按钮文本
      this.dialogForm.url = button.url; // 初始化网址为空
      this.dialogVisible = true; // 显示对话框
      // 可以在这里保存rowIndex和buttonIndex，以便在保存时使用
       this.currentIndex = { rowIndex, colIndex };
    },
    saveDialogData() {
      // 这里可以处理保存对话框数据的逻辑
      // 例如，更新buttonRows中的数据
      this.data.buttonRows[this.currentIndex.rowIndex][this.currentIndex.colIndex].text = this.dialogForm.title
      this.data.buttonRows[this.currentIndex.rowIndex][this.currentIndex.colIndex].url = this.dialogForm.url
      this.$refs['dialogForm'].validate((valid) => {
        if(valid){
          this.dialogVisible = false;
        }else{
          return false
        }
      })

    },
    handleDialogClose() {
      // 对话框关闭时的回调，如果需要可以重置表单
      this.dialogForm.title = '';
      this.dialogForm.url = '';
    },
    addButton(rowIndex) {
      const newId = this.data.buttonRows[rowIndex].reduce((max, button) => Math.max(max, button.id), 0) + 1;
      const newButtonText = `按钮 ${newId}`;
      if (this.data.buttonRows[rowIndex].length < 4) {
        this.data.buttonRows[rowIndex].push({ id: newId, text: newButtonText ,url:''});
      }
    },
    addRow() {
      const newId = this.data.buttonRows.reduce((maxRow, row) => Math.max(...row.map(button => button.id), 0) + 1, 0);
      this.data.buttonRows.push([{ id: newId, text: `按钮 ${newId}` }]);
    },
    deleteButton(rowIndex, buttonIndex) {
      this.data.buttonRows[rowIndex].splice(buttonIndex, 1);
      if(this.data.buttonRows[rowIndex].length==0 && rowIndex!=0){
        this.data.buttonRows.splice(rowIndex,1)
      }
    },
    getData(){
      return this.data;
    },
    validateEmpty(){
      let result = {
        validate:true,
        msg:""
      }
      if(!this.data.content){
        result = {
          validate:false,
          msg:this.label+"不能为空"
        }
        return result;
      }
      //检验是否为空
      for (let i = 0; i < this.data.buttonRows.length; i++) {
        for (let j = 0; j < this.data.buttonRows[i].length; j++) {
           let btn = this.data.buttonRows[i][j];
           if(!btn.text || !btn.url){
             result = {
               validate:false,
               msg:"第" + (i + 1) + "行" + (j + 1) + "列按钮校验不通过"
             }
             return result;
           }
        }
      }
      return result
    },
    sendMessageTest(){
      if(this.data.chatId==null || this.data.chatId==undefined){
        this.$modal.msgWarning("群组ID不能为空");
        return;
      }
      let validateEmpty = this.validateEmpty();
      if(!validateEmpty.validate){
        this.$modal.msgWarning(validateEmpty.msg);
        return;
      }
      sendMessageTest({ config:JSON.stringify(this.data) }).then(res=>{
        this.$modal.msgSuccess("发送成功");
      })
    },
  }
};
</script>

<style scoped>
.el-main{
  padding: 0px !important;
  overflow-x: hidden;
}
.el-row{
  margin-bottom: 10px;
}
.button-col {
  position: relative;
}

.button-wrapper {
  display: inline-block;
  position: relative;
}
.button-wrapper .el-button{
  padding: 10px 10px !important;
  width: 75px;
  font-size:12px;
  white-space: nowrap; /* 确保文字在同一行显示 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 使用省略号表示文字溢出 */
}

.delete-button {
  position: absolute;
  top: 0px; /* Adjust this value to position the delete button correctly */
  right: 7px; /* Adjust this value to position the delete button correctly */
  cursor: pointer;
  width: 10%;
  height: 10%;
}

.add-button-col .el-button {
  text-align: center;
}

.add-row-col .el-button {
  margin-top: 20px;
  width: 100%;
}

.dialog-footer {
  text-align: right;
}
</style>
